<script lang="ts" setup>
import { ref, computed } from "vue";

// 校园招聘活动接口
interface HireEvent {
    id: string;
    title: string;
    companyName: string;
    companyLogo: string;
    startTime: string;
    endTime: string;
    location: string;
    mode: string;
    tags: string[];
    status: "upcoming" | "ongoing" | "finished";
    targetSchools?: string[];
    targetMajors?: string[];
    companyIndustry?: string;
    companySize?: string;
    companyDescription?: string;
    description?: string;
    positions?: any[];
}

// 定义属性
const props = defineProps({
    hireList: {
        type: Array as () => HireEvent[],
        required: true,
    },
    selectedHireId: {
        type: String,
        default: "",
    },
});

// 定义事件
const emit = defineEmits(["select"]);

// 详情抽屉
const calendarDetailVisible = ref(false);

// 获取状态样式
const getStatusType = (status: string) => {
    const statusMap = {
        upcoming: "warning", // 即将开始
        ongoing: "success", // 正在进行
        finished: "info", // 已结束
    };
    return statusMap[status as keyof typeof statusMap] || "info";
};

// 获取状态文本
const getStatusText = (status: string) => {
    const statusMap = {
        upcoming: "即将开始",
        ongoing: "正在进行",
        finished: "已结束",
    };
    return statusMap[status as keyof typeof statusMap] || "未知状态";
};

// 根据日期获取当天的招聘活动
const getEventsOnDate = (data: any) => {
    // 获取日期字符串，格式如 2023-11-15
    const dateStr = data.day;

    // 筛选出当天的招聘活动
    return props.hireList.filter((event) => {
        const eventDate = new Date(event.startTime);
        const eventDateStr = `${eventDate.getFullYear()}-${String(eventDate.getMonth() + 1).padStart(2, "0")}-${String(
            eventDate.getDate()
        ).padStart(2, "0")}`;
        return eventDateStr === dateStr;
    });
};

// 选择招聘活动
const selectHire = (id: string) => {
    emit("select", id);
    calendarDetailVisible.value = true;
};

// 在日历单元格中，将相同企业的活动合并在一起
const getGroupedEvents = (data: any) => {
    const events = getEventsOnDate(data);
    const groupedEvents: Record<string, HireEvent[]> = {};

    events.forEach((event) => {
        if (!groupedEvents[event.companyName]) {
            groupedEvents[event.companyName] = [];
        }
        groupedEvents[event.companyName].push(event);
    });

    return groupedEvents;
};
</script>

<template>
    <el-card>
        <el-calendar>
            <template #dateCell="{ data }">
                <div class="calendar-cell">
                    <p :class="{ 'is-today': data.isToday }">
                        {{ data.day.split("-").slice(2).join("") }}
                    </p>

                    <!-- 当天的招聘活动 -->
                    <div v-for="(events, companyName) in getGroupedEvents(data)" :key="companyName">
                        <el-popover
                            placement="top"
                            :width="200"
                            trigger="hover"
                            :content="events.map((e) => e.title).join('\n')"
                        >
                            <template #reference>
                                <el-tag
                                    :type="getStatusType(events[0].status)"
                                    effect="plain"
                                    size="small"
                                    class="calendar-tag"
                                    @click="selectHire(events[0].id)"
                                >
                                    {{ companyName }} ({{ events.length }}场)
                                </el-tag>
                            </template>
                        </el-popover>
                    </div>
                </div>
            </template>
        </el-calendar>
    </el-card>
</template>

<style scoped>
.calendar-cell {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2px;
}

.is-today {
    color: var(--el-color-primary);
    font-weight: 600;
    font-size: 14px;
    background-color: var(--el-color-primary-light-9);
    border-radius: 4px;
    padding: 2px 4px;
    text-align: center;
    margin: 2px 0 6px;
    width: fit-content;
}

.calendar-tag {
    margin: 2px 0;
    cursor: pointer;
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.2s;
    border-radius: 4px;
    font-size: 12px;
    padding: 0 8px;
    border: none;
}

.calendar-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 自定义日历组件样式 */
:deep(.el-calendar) {
    --el-calendar-border: none;
    --el-calendar-header-border-bottom: 1px solid #f0f0f0;
}

:deep(.el-calendar__header) {
    padding: 12px 20px;
}

:deep(.el-calendar__title) {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

:deep(.el-calendar__button-group) {
    padding: 0 4px;
}

:deep(.el-button.is-text) {
    color: #606266;
    font-weight: 500;
}

:deep(.el-calendar-day) {
    padding: 8px;
    height: auto;
    min-height: 80px;
}

:deep(.el-calendar-table) {
    border-spacing: 4px;
    border-collapse: separate;
}

:deep(.el-calendar-table td) {
    border: none;
    border-radius: 8px;
    transition: all 0.3s;
}

:deep(.el-calendar-table td.is-selected) {
    background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-calendar-table td.is-today) {
    background-color: rgba(64, 158, 255, 0.05);
    color: var(--el-color-primary);
}

:deep(.el-calendar-table .el-calendar-day:hover) {
    background-color: rgba(245, 247, 250, 0.8);
}

/* 弹出提示框样式 */
:deep(.el-popover) {
    padding: 12px;
    min-width: 120px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    border: none;
}
</style>
